<template>
  <div style="position: relative; height: 99.9%">
    <breadcrumb></breadcrumb>
    <div class="Box">
      <div class="header">
        <h2 style="
            font-size: 16px;
            color: #262626;
            font-family: MicrosoftYaHei-Bold;
          ">
          {{ orderId ? "修改订单" : "创建订单" }}
        </h2>
      </div>
      <div class="main">
        <!-- 交易信息板块 -->
        <div class="main_item">
          <el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px"
            class="input_form">
            <el-row style="width: 100%">
              <el-col :span="8">
                <el-form-item label="供应商" prop="supplierId">
                  <el-input size="small"  :readOnly="true"
                    v-model="transactionForm.gongyingshang" placeholder="请选择供应商" :class="{ inputError: inputError }">
                    <template slot="append">
                      <div style="cursor: pointer" @click="SelectSupplier">
                        选择供应商
                      </div>
                    </template>
                  </el-input>
                  <div v-show="inputError" style="font-size: 12px;color:#F56C6C">请选择供应商</div>
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>
          <titleBgVue :title="'交易信息'"></titleBgVue>

          <div class="formItem">
            <el-form :model="formData" :rules="SchedulingRules" ref="transactionForm" label-width="117px"
              class="input_form">
              <el-row style="width: 100%">
                <el-col :span="8">
                  <el-form-item label="货源方" prop="ownerId">
                    <el-input size="small" :readOnly="true" v-model="transactionForm.huozhu" placeholder="请选择货源方">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectcargoe">
                          选择货主
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="项目名称" prop="projectId">
                    <el-input size="small" v-model="transactionForm.name" :readOnly="true" placeholder="请选择项目">
                      <template slot="append">
                        <div style="cursor: pointer" @click="Selectitem">
                          选择项目
                        </div>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计划名称" prop="ownerProject">
                    <el-select style="position: relative;top:-4px" size="small" v-model="transactionForm.plan"
                      placeholder="请选择">
                      <el-option v-for="item in planArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计价方式" prop="pricingMethod">
                    <el-select size="small" v-model="formData.pricingMethod" placeholder="请选择">
                      <el-option v-for="item in jijiaArr" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计量单位" prop="measureUnit">
                    <el-select size="small" v-model="formData.measureUnit" placeholder="请选择" @change="changeMeasureUnit">
                      <el-option v-for="item in jiliangdawei" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="运量" prop="cargoWeight">
                    <el-input size="small" v-model="formData.cargoWeight" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主单价" prop="ownerUnitPrice">
                    <el-input size="small" v-model="formData.ownerUnitPrice" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="货主金额" prop="totalAmount">
                    <el-input size="small" v-model="formData.totalAmount" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机单价" prop="unitPrice">
                    <el-input size="small" v-model="formData.unitPrice" placeholder="请输入金额">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机运费" prop="freight">
                    <el-input size="small" v-model="formData.freight" placeholder="请输入运费">
                      <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                        元
                      </div>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <!-- 收发货信息板块 -->
        <div class="main_item">
          <titleBgVue :title="'收发货信息'"></titleBgVue>
          <div class="formItem">
            <el-form :model="ShippingReceivingInfoForm" :rules="ShippingReceivingInfoRules" label-width="117px"
              class="input_form">
              <el-row>
                <el-col :span="24">
                  <el-col :span="8">
                    <el-form-item class="reddian" label="选择路线" prop="selection">
                      <el-input size="small" :readOnly="true" v-model="ShippingReceivingInfoForm.selection"
                        placeholder="请选择路线">
                        <template slot="append">
                          <div style="cursor: pointer" @click="Selectline">
                            选择路线
                          </div>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="8">
                      <el-form-item label="距离(公里)" prop="Distance">
                        <el-input v-model="ShippingReceivingInfoForm.Distance" :disabled="true"></el-input>
                      </el-form-item>
                    </el-col> -->
                </el-col>

                <el-col :span="24">
                  <el-form-item class="reddian" label="发货地" prop="setOut">
                    <!-- 发货地表格 -->
                    <el-table :data="start" style="width: 100%; border: 1px solid #f0f0f0"
                      :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
                      <el-table-column align="left" prop="" width="50" label="序号">
                        <template slot-scope="scope">
                          <div>
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">地址</div>
                        </template>
                        <template slot-scope="scope">
                          <div @click="AddMap(scope.$index, 0, scope.row.address)">
                            <el-input size="small" :readonly="true" v-model="scope.row.address" placeholder="请选择地址">
                            </el-input>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="详细门牌号" align="center">
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.detail" placeholder="请输入详细门牌号">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contact" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系人</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.contact" placeholder="请输入联系人">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系电话</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.phone" placeholder="请输入联系电话">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <i class="iconfontcolor icon-a- pointer" v-if="scope.$index == 0" @click="addCargo(0)"></i>
                          <i class="iconfontcolor icon-a-- pointer" @click="DeletCargo(scope.$index, 0)" v-else></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="目的地" class="reddian" prop="setOut">
                    <!-- 发货地表格 -->
                    <el-table :data="end" style="width: 100%; border: 1px solid #f0f0f0"
                      :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle">
                      <el-table-column align="left" prop="" width="50" label="序号">
                        <template slot-scope="scope">
                          <div>
                            {{ scope.$index + 1 }}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">地址</div>
                        </template>
                        <template slot-scope="scope">
                          <div @click="AddMap(scope.$index, 1, scope.row.address)">
                            <el-input size="small" :readonly="true" v-model="scope.row.address" placeholder="请选择地址">
                            </el-input>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="detail" label="详细门牌号" align="center">
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.detail" placeholder="请输入详细门牌号">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="contact" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系人</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.contact" placeholder="请输入联系人">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" align="center">
                        <template slot="header">
                          <div class="beforeRedDian">联系电话</div>
                        </template>
                        <template slot-scope="scope">
                          <el-input size="small" v-model="scope.row.phone" placeholder="请输入联系电话">
                          </el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="phone" label="货物明细" align="center">
                        <template slot-scope="scope">
                          <div style="font-size: 20px">
                            <el-button type="text" size="small" @click="cargoVisible(scope.$index)"
                              style="font-size: 15px">编辑货物明细</el-button>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <i class="iconfontcolor icon-a- pointer" v-if="scope.$index == 0" @click="addCargo(1)"></i>
                          <i class="iconfontcolor icon-a-- pointer" @click="DeletCargo(scope.$index, 1)" v-else></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <!-- 调度信息板块 -->
        <div class="main_item">
          <titleBgVue :title="'调度信息'"></titleBgVue>
          <div class="formItem">
            <el-form :model="formData" :rules="SchedulingRules" ref="SchedulingForm" label-width="117px"
              class="input_form">
              <el-row style="width: 100%">
                <el-col :span="8">
                  <el-col :span="24">
                    <el-form-item label="订单截止时间" prop="endTime">
                      <el-date-picker size="small" v-model="formData.endTime" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="发货时间" prop="shippedTime">
                      <el-date-picker size="small" v-model="formData.shippedTime" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :picker-options="pickerOptionsStart">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="送达时间" prop="finishTime">
                      <el-date-picker size="small" v-model="formData.finishTime" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :picker-options="pickerOptionsEnd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="接单人" prop="driverId">
                      <el-input size="small" v-model="transactionForm.Carrier" :readOnly="true" placeholder="请选择接单人">
                        <template slot="append">
                          <div style="cursor: pointer" @click="SelectAccept">
                            选择接单人
                          </div>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="8">
                  <el-col :span="24">
                    <el-form-item label="车型" prop="carType" class="carTypeSelect">
                      <el-select size="small" placeholder="请选择" v-model="SchedulingForm.carType" @change="changeArr">
                        <el-option v-for="item in carTypeArr" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                      <div class="carPicBox" v-show="CarData">
                        <div class="imgBg">
                          <img class="carPic" :src="CarData.image" />
                        </div>

                        <div class="infoBox">
                          <div class="info_item">
                            <span class="info_item_tit">载重</span>
                            <span class="text">{{ CarData.loads }}吨</span>
                          </div>
                          <div class="info_item">
                            <span class="info_item_tit">长高</span>
                            <span class="info_item_tit">{{ CarData.length }}*{{ CarData.height }}m</span>
                          </div>
                          <div class="info_item">
                            <span class="info_item_tit">载方</span>
                            <span class="text">{{ CarData.capacity }}方</span>
                          </div>
                        </div>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="订单备注" prop="beizhu">
                    <el-input size="small" type="textarea" resize="none" :rows="6" class="notesInput" placeholder="请输入内容"
                      v-model="formData.description" maxlength="50" show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footerControlBox">
      <el-button class="cancelBtn" @click="$router.push('/supplierManagement/assistcreatingOrder')">取消</el-button>
      <el-button class="submitBtn" type="primary" @click="submit">提交</el-button>
    </div>

    <!-- 货物明细弹框 -->
    <el-dialog title="编辑货物明细" :visible.sync="cargoDetailsVisible" width="1000px" class="cargoDetails_dialog">
      <div class="head">
        <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
          :show-file-list="false" accept=".xlsx,.xls" style="width: 150px; display: inline-flex">
          <el-button class="importBtn" type="primary">导入excel文档</el-button>
        </el-upload>
        <el-button class="importBtn1" type="warning" @click="Download">下载excel模板</el-button>
        <el-button class="importBtn1" type="success" @click="AddHuo">添加货物信息</el-button>
      </div>

      <div class="tableBox">
        <el-table class="cargoDetails_table" :data="end[EndIndex].orderCargoDetails"
          :header-row-style="{ height: '40px', backgroundColor: 'red' }"
          :row-style="{ color: '#666666', fontSize: '12px' }">
          <el-table-column align="left" prop="" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="大类">
            <template slot-scope="scope">
              <el-select size="small" v-model="scope.row.cargoType" placeholder="请选择">
                <el-option v-for="item in LargeCategoryArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="货物名称">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.cargoName"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="运量" width="150px">
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input size="small" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="scope.row.cargoWeight"
                  style="width: 80px">
                </el-input>
                <el-select size="small" style="width: 70px" v-model="scope.row.measureUnit" placeholder="请选择">
                  <el-option v-for="item in measureUnitArr" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="品牌">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.brand"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="规格">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.cargoVolume">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量">
            <template slot-scope="scope">
              <el-input size="small" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="scope.row.cargoQuantity">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.description">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="iconfontcolor icon-a-- pointer" @click="DeleteIndex(scope.$index)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog_footer">
        <el-button class="cancelBtn3" @click="cargoDetailsVisible = false">取消</el-button>
        <el-button class="submitBtn3" type="primary" @click="cargoDetailsVisible = false">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="供应商信息" :visible.sync="Dialogsupplier" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input placeholder="请输入供应商" clearable v-model="supplierNameValue">
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('供应商信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="suppliermood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="suppliermood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="supplierName" label="供应商名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="supplierXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>

    <el-dialog title="货主信息" :visible.sync="DialogVisible" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input placeholder="请输入货主名" clearable v-model="CargoOwnerValue">
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('货主信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="cargoemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="cargoemood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="货主名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="cargoeXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>

    <el-dialog title="项目信息" :visible.sync="DialogItem" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="projectNameValue" placeholder="请输入项目名" clearable> </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('项目信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="itemmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="itemmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="ItemXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>
    <el-dialog title="车队信息" :visible.sync="DialogFleet" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="fleetNameValue" placeholder="请输入车队名称" clearable>
          </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('车队信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="DialogAcceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="DialogAcceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="fleetName" label="承运方名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="AcceptListFleet(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
        </el-pagination>
      </div> -->
    </el-dialog>
    <el-dialog title="接单人信息" :visible.sync="DialogAcceptList" center class="fpkp-dialog">
      <el-row class="flex-fpkp">
        <el-col :md="10" class="ipt-qym">
          <el-input v-model="driverNameValue" placeholder="请输入接单人名称" clearable> </el-input>
        </el-col>
        <el-col class="cxbt">
          <el-button type="primary" @click="qyxz('接单人信息')">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="Acceptmood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Acceptmood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="driverName" label="接单人名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="AcceptListXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>

    <el-dialog title="选择线路" :visible.sync="DialogLine" center class="fpkp-dialog">
      <div class="controlLine">
        <div class="inputItem">
          <div class="title">路线名称</div>
          <div class="inputBox">
            <el-input v-model="searchLineName" @keyup.enter.native="Selectline">
            </el-input>
          </div>
        </div>
        <el-button type="primary" size="small" icon="el-icon-search" @click="Selectline">查询</el-button>
        <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearSelectline">清空</el-button>
      </div>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="Linemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="Linemood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="lineName" label="名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="LineXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>
    <iframe src="/orderMap.html" ref="iframeTwo" frameborder="0" id="iframetest" width="0" height="0"></iframe>
    <el-dialog title="线路信息" :visible.sync="DialogMap" center class="fpkp-dialog" width="50%">
      <div>
        <iframe src="/orderMap.html" ref="iframe" frameborder="0" id="iframetest" width="100%" height="500"></iframe>
      </div>

      <div class="dialog_footer" style="width: 100%; display: flex; justify-content: flex-end;margin-top:15px;">
        <el-button class="cancelBtn3" @click="DialogMap = false">取消</el-button>
        <el-button class="submitBtn3" type="primary" @click="serMap">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleBgVue from "@/components/titleBg.vue";
import { read, utils } from "xlsx";
import store from "@/store/index";
export default {
  data() {
    return {
      inputError: false,
      driverNameValue: "",//接单人信息弹框  司机名称搜索
      projectNameValue: "",//项目信息弹框 输入框项目名称
      CargoOwnerValue: "",  //货主信息 搜索货主
      fleetNameValue: "", //车队信息 搜索车队名称
      supplierNameValue: "",//供应商信息 搜索供应商名称


      supplierIdValue: "",


      searchLineName: "",//选择路线弹框 搜索路线名称
      // 发货时间限制  发货时间不大于送达时间
      // <!-- formData.shippedTime  formData.finishTime-->

      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.formData.finishTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() >
              new Date(this.formData.finishTime).getTime() -
              1 * 24 * 60 * 60 * 1000
            );
          }
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() <
            new Date(this.formData.finishTime).getTime() +
            1 * 24 * 60 * 60 * 1000
          );
        },
      },

      key: "",
      DialogLine: false,
      DialogCar: false,
      DialogMap: false,
      DialogVisible: false,
      Dialogsupplier: false,
      DialogItem: false,
      DialogAcceptList: false,
      DialogFleet: false, // 车队弹框
      addDriverVisible: false, //添加司机弹框
      cargoDetailsVisible: false, //货物明细弹框
      cargoemood: [],
      itemmood: [],
      Acceptmood: [],
      DialogAcceptmood: [],
      Linemood: [],
      suppliermood: [],
      // 交易信息 表单数据
      transactionForm: {
        huozhu: "",
        gongyingshang: "",
        name: "",
        jijia: "",
        plan: "",
        jiliang: "",
        yunliang: "",
        danjia: "",
        money: "",
        carrierUunitPrice: "",
        carrierMoney: "",
      },
      transactionRules: {
        huozhu: [
          { required: true, message: "请点击右侧选择", trigger: "blur" },
        ],
        gongyingshang: [
          { required: true, message: "请点击右侧选择", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        plan: [{ required: true, message: "请输入", trigger: "blur" }],
        jijia: [{ required: true, message: "请输入", trigger: "blur" }],
        jiliang: [{ required: true, message: "请输入", trigger: "blur" }],
        yunliang: [{ required: true, message: "请输入", trigger: "blur" }],
        danjia: [{ required: true, message: "请输入", trigger: "blur" }],
        money: [{ required: true, message: "请输入", trigger: "blur" }],
        carrierUunitPrice: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        carrierMoney: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 调度信息 表单数据
      SchedulingForm: {
        overTime: "",
        fahuoTime: "",
        shouHuoTime: "",
        Carrier: "",
        isDispatchingDriver: "1",
        DispatchingDriver: [],
        carType: "",
        beizhu: "",
      },

      //收发货信息
      ShippingReceivingInfoForm: {
        selection: "",
        Distance: "8",
        sendOut: [],
        destination: [],
      },
      ShippingReceivingInfoRules: {},
      // 货物明细
      LargeCategoryArr: [
        { value: 1, label: "建材" },
        { value: 2, label: "建材2" },
      ],
      jiliang: "",
      jiliangArr: [],
      jijia: "",
      jijiaArr: [
        { value: 1, label: "按里程" },
        { value: 2, label: "按量" },
      ],
      jiliangdawei: [
        { value: 1, label: "车" },
        { value: 2, label: "吨" },
        { value: 3, label: "件" },
      ],
      plan: "",
      planArr: [],
      CarrierArr: [],
      carTypeArr: [],
      SchedulingRules: {
        ownerId: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],

        supplierId: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        projectId: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        pricingMethod: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        // ownerProject: [
        //   { required: true, message: "请保持信息完整", trigger: "blur" },
        // ],
        measureUnit: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        cargoWeight: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        unitPrice: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        totalAmount: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        ownerUnitPrice: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        freight: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        finishTime: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        shippedTime: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        driverId: [
          { required: true, message: "请保持信息完整", trigger: "change" },
        ],
        description: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
        lineId: [
          { required: true, message: "请保持信息完整", trigger: "blur" },
        ],
      },
      formData: {
        supplierId: "", // 供应商ID
        ownerId: "", //货主ID
        projectId: "", //项目ID
        pricingMethod: "", //计价方式
        ownerProject: "", //计划名称
        measureUnit: "", //计量单位
        cargoWeight: "", //运量
        unitPrice: "", //承运方单价
        totalAmount: "", //货主金额
        ownerUnitPrice: "", //货主单价
        freight: "", //承运人金额
        endTime: "", //截止时间
        finishTime: "", //送达时间
        shippedTime: "", //发货时间
        driverId: "", //承运方Id
        description: "", //订单备注描述
        carTypeNeeds: "", //车型需要Id
        lineId: "", //线路ID
        startAddress: [], //发货地
        endAddress: [], //目的地
        appointSupplierId: "", //车队id
      },
      creadMood: [],
      CarData: "",
      diverMood: "",
      start: [
        {
          address: "",
          name: "",
          phone: "",
          lat: "",
          lng: "",
        },
      ],
      end: [
        {
          address: "",
          name: "",
          phone: "",
          lat: "",
          lng: "",
          orderCargoDetails: [],
        },
      ],
      iframeWin: {}, //Map返回值
      SatrIndex: 0,
      EndIndex: 0,
      compute: false,
      fleetName: "", //车队输入框
      orderId: this.$route.query.id,
      issubmit: false, // 是否提交 用于保存

      measureUnitArr: [
        { label: "车", value: "1" },
        { label: "吨", value: "2" },
        { label: "件", value: "3" },
        { label: "KG", value: "4" },
        { label: "箱", value: "5" },
        { label: "托", value: "6" },
        { label: "台", value: "7" },
        { label: "方", value: "8" },
      ],

      tijiao: "",
    };
  },
  created() {
    this.cread();
  },
  methods: {
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;'
    },
    tableHeaderStyle2({ row, column, rowIndex, columnIndex }) {
      return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F0F6FC;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;'
    },
    rowStyle({ row, rowIndex }) {
      return 'tableRowStyleName'
    },
    // 计量单位变化时,表格的单位也变化
    changeMeasureUnit(val) {
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        item.measureUnit = this.formData.measureUnit;
      });
    },
    serMap() {
      let dataMap = this.$refs.iframe.contentWindow.ToManualRoamFunc();
      this.DialogMap = false;
      if (this.judgment == 0) {
        for (let k in dataMap) {
          this.start[this.SatrIndex][k] = dataMap[k];
        }
      } else {
        for (let k in dataMap) {
          this.end[this.EndIndex][k] = dataMap[k];
        }
      }
    },
    //添加地址
    AddMap(e, i, z) {
      let that = this;
      if (i == 0) {
        this.SatrIndex = e;
      } else {
        this.EndIndex = e;
      }
      this.judgment = i;
      this.DialogMap = true;
      setTimeout(() => {
        that.$refs.iframe.contentWindow.VueMap(z);
      }, 1000);
    },

    //删除地址
    DeletCargo(e, i) {
      if (i == 0) {
        this.start.forEach((item, i) => {
          if (i == e) {
            this.start.splice(i, 1);
          }
        });
      } else {
        this.end.forEach((item, i) => {
          if (i == e) {
            this.end.splice(i, 1);
          }
        });
      }
    },
    //追加地址数据
    addCargo(e) {
      if (e == 0) {
        this.start.push({
          address: "",
          name: "",
          phone: "",
        });
      } else {
        this.end.push({
          address: "",
          name: "",
          phone: "",
          orderCargoDetails: [],
        });
      }
    },

    //货物明细
    cargoVisible(e) {
      this.EndIndex = e;
      this.cargoDetailsVisible = true;
    },
    //下载模板
    Download() {
      const a = document.createElement("a");
      a.href = "/huowu.xlsx";
      a.download = "huowu.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    //添加货物
    AddHuo() {
      this.end[this.EndIndex].orderCargoDetails.push({
        cargoType: "", //大类
        cargoName: "", //名称
        cargoWeight: "", //运量cargoWeight
        measureUnit: "吨", //运量单位
        brand: "", //品牌
        cargoVolume: "", //规格
        cargoQuantity: "", //货物数量
        description: "", //备注
      });
    },
    //删除货物行
    DeleteIndex(e) {
      this.end[this.EndIndex].orderCargoDetails.forEach((item, i) => {
        if (i == e) {
          this.end[this.EndIndex].orderCargoDetails.splice(i, 1);
        }
      });
    },
    //导入excel文档
    upload(file, fileList) {
      let files = { 0: file };
      this.readExcel1(files);
    },
    // 获取导入excel文档的数据
    readExcel1(files) {
      var that = this;
      //console.log(files);
      // 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改
      // 如果没有文件名
      if (files.length <= 0) {
        return;
      }
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error("上传格式不正确，请上传xls或者xlsx格式");
        return;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0];
          const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
          let cont = JSON.stringify(ws)
            .replace(/大类/g, "cargoType")
            .replace(/货物名称/g, "cargoName")
            .replace(/运量单位/g, "measureUnit")
            .replace(/运量/g, "cargoWeight")
            .replace(/品牌/g, "brand")
            .replace(/规格/g, "cargoVolume")
            .replace(/数量/g, "cargoQuantity")
            .replace(/备注/g, "description");
          this.end[this.EndIndex].orderCargoDetails = JSON.parse(cont);
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },
    clearSelectline() {
      this.searchLineName = ''
      this.Selectline()
    },

    //拿线路信息
    async Selectline() {
      if (!this.formData.ownerId) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await this.$http.supplierManagementApi.userLineDownList({
        ownerId: this.formData.ownerId,
        lineName: this.searchLineName
      });
      this.Linemood = res.data.data;
      this.DialogLine = true;
    },
    //选择线路详情
    async LineXuan(e) {
      this.formData.lineId = e.lineId;
      this.ShippingReceivingInfoForm.selection = e.lineName;
      let res = await this.$http.supplierManagementApi.userLineAddressList({
        lineId: this.formData.lineId,
      });
      let mood = JSON.parse(JSON.stringify(res.data.data));
      this.start = mood.startAddress;
      this.end = mood.endAddress;
      this.end.forEach((item) => {
        item.orderCargoDetails = [];
      });
      this.end = JSON.parse(JSON.stringify(this.end));
      this.DialogLine = false;

      this.searchLineName = ''
    },

    //拿车型信息
    changeArr(e) {
      this.CarData = this.creadMood[e];
      this.formData.carTypeNeeds = this.creadMood[e].categoryId + "";
    },

    qyxz(val) {
      // 搜索查询 
      if (val == '供应商信息') {
        this.SelectSupplier()
      } else if (val == '货主信息') {
        this.Selectcargoe();//货主信息查询
      } else if (val == '接单人信息') {
        this.AcceptListFleet()
      } else if (val == '项目信息') {
        this.Selectitem()  //项目信息查询
      } else if (val = '车队信息') {
        this.SelectAccept();
      }
    },
    //拿货主信息
    async Selectcargoe() {
      if (this.formData.supplierId) {
        let res = await this.$http.supplierManagementApi.dropDownByOrder({
          supplierId: this.formData.supplierId,
          name: this.CargoOwnerValue
        });
        this.cargoemood = res.data.data.records;
        this.DialogVisible = true;
      } else {
        this.$message.error("请先选择供应商");
      }
    },
    //拿供应商信息
    async SelectSupplier() {
      let res =
        await this.$http.supplierManagementApi.getSupplierManagementList({
          supplierName: this.supplierNameValue,
        });
      this.suppliermood = res.data.data.records;

      this.Dialogsupplier = true;
    },

    //选择货主
    cargoeXuan(e) {
      this.transactionForm.huozhu = e.name;
      this.formData.ownerId = e.ownerId;
      this.DialogVisible = false;
      // 选择货主清除项目
      this.transactionForm.name = "";
      this.formData.projectId = "";

      this.CargoOwnerValue = ''
    },
    //选择供应商
    supplierXuan(e) {
    
      this.transactionForm.gongyingshang = e.supplierName;
      this.formData.supplierId = e.supplierId;
      this.Dialogsupplier = false;
      // 选择供应商清除货主
      this.transactionForm.huozhu = "";
      this.formData.ownerId = "";
      // 选择货主清除项目
      this.transactionForm.name = "";
      this.formData.projectId = "";
      //选择后清空搜索值
      this.supplierNameValue = ''
      if (this.transactionForm.gongyingshang == '') {
        this.inputError = true
      } else {
        this.inputError = false
      }
    },

    //拿项目信息
    async Selectitem() {
      if (!this.transactionForm.huozhu) {
        this.$message.error("请先选择货主");
        return false;
      }
      let res = await this.$http.supplierManagementApi.project_down({
        ownerId: this.formData.ownerId,
        projectName: this.projectNameValue
      });
      this.itemmood = res.data.data;

      this.DialogItem = true;
    },
    //选择项目
    ItemXuan(e) {
      this.transactionForm.name = e.name;
      this.formData.projectId = e.projectId;
      this.DialogItem = false;
    },

    //*接单人信息
    async SelectAccept() {
      if (!this.transactionForm.gongyingshang) {
        this.$message.error("请先选择供应商");
        return false;
      }
      let parmas = {
        supplierId: this.formData.supplierId,
        fleetName: this.fleetNameValue,
      };
      // 选择车队
      let res = await this.$http.supplierManagementApi.dropDownFleet(parmas);
      //console.log(res);
      this.DialogAcceptmood = res.data.data;
      this.DialogFleet = true;
      // this.Acceptmood = res.data;
    },
    //选择接单人
    async AcceptListFleet(e) {
      console.log(e)
      if (e != undefined) {
        this.formData.appointSupplierId = e.fleetId;
      }


      this.DialogFleet = false;
      let parmas = {
        fleetId: this.formData.appointSupplierId,
        driverName: this.driverNameValue
      };

      let res = await this.$http.supplierManagementApi.dropDownDriver(parmas);
      this.Acceptmood = res.data.data;
      this.DialogAcceptList = true;
      //console.log(res.data);
      this.fleetNameValue = ''
    },

    AcceptListXuan(e) {
      this.transactionForm.Carrier = e.driverName;
      this.formData.driverId = e.driverId;
      this.DialogAcceptList = false;

      this.driverNameValue = ''
    },

    async cread() {
      let res = await this.$http.supplierManagementApi.get_vehicle_model_list();
      let mood = res.data.data.homeVehicleModelVoList;
      this.carTypeArr = [];
      this.creadMood = mood;
      mood.forEach((item, i) => {
        this.carTypeArr.push({ value: i, label: item.name });
      });
      if (this.orderId) {
        let res1 = await this.$http.supplierManagementApi.getUpdateDetail({
          orderId: this.$route.query.id,
        });
        this.transactionForm.huozhu = res1.data.data.cargoName;
        this.transactionForm.name = res1.data.data.projectName;
        this.transactionForm.gongyingshang = res1.data.data.supplierName;
        this.transactionForm.Carrier =
          res1.data.data.orderDispatches[0].driverName;
        this.ShippingReceivingInfoForm.selection = res1.data.data.lineName;
        this.start = res1.data.data.startAddress;
        this.end = res1.data.data.endAddress;
        for (let k in res1.data.data) {
          this.formData[k] = res1.data.data[k];
        }
        this.formData.orderId = this.orderId;
        this.formData.driverId = this.formData.orderDispatches[0].driverId;

        this.creadMood.map((item, index) => {
          if (item.categoryId == this.formData.categoryId) {
            this.SchedulingForm.carType = index;
            this.changeArr(index);
          }
        });
        this.SchedulingForm.DispatchingDriver = this.formData.orderDispatches;
      } else {
        if (this.$store.state.orderData) {
          let orderData = this.$store.state.orderData;
          this.formData = orderData.formData;
          this.transactionForm = orderData.transactionForm;
          this.SchedulingForm = orderData.SchedulingForm;
          this.ShippingReceivingInfoForm = orderData.ShippingReceivingInfoForm;
          this.start = orderData.start;
          this.end = orderData.end;
          if (this.formData.carTypeNeeds) {
            this.creadMood.map((item, index) => {
              if (item.categoryId == this.formData.carTypeNeeds) {
                this.SchedulingForm.carType = index;
                this.changeArr(index);
              }
            });
          }
        }
      }
    },

    // 添加调度司机
    addDispatchDriver(e) {
      // 发货地
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        if (i == e) {
          this.SchedulingForm.DispatchingDriver.splice(i, 1);
        }
      });
    },
    deleteDriver(index) {
      this.addRouteForm.destinationPlaceTable.splice(index, 1);
    },



    async submit() {
      // ref表单命名冲突 表单验证以最后个覆盖前面个 2改 方案  选择供应商原生写验证
      if (this.transactionForm.gongyingshang == '') {
        this.$message.error('请先选择供应商')
        this.inputError = true
        return
      }

      this.$refs['transactionForm'].validate((valid) => {
        if (valid) {
          this.$refs['SchedulingForm'].validate((valid) => {
            if (valid) {
              let that = this;
              console.log(this);
              this.$refs.iframeTwo.contentWindow.clacle(
                that.start,
                that.end
              ).then(res => {
                let cont = res;
                cont.forEach((item, i) => {
                  item.addsort = i + 1;
                });
                cont = JSON.parse(JSON.stringify(cont));
                that.start.forEach((item) => {
                  cont.forEach((meth) => {
                    if (item.address == meth.address) {
                      item = meth;
                    }
                  });
                });
                that.end.forEach((item) => {
                  cont.forEach((meth) => {
                    if (item.address == meth.address) {
                      item = meth;
                    }
                  });
                });
                let jingao = false;

                this.start.forEach((item) => {
                  for (let k in item) {
                    if (k == "address" || k == "contact" || k == "phone") {
                      console.log(item[k]);
                      if (!item[k]) {
                        jingao = true;
                      }
                    }
                  }
                });
                this.end.forEach((item) => {
                  for (let k in item) {
                    if (k == "address" || k == "contact" || k == "phone") {
                      if (!item[k]) {
                        jingao = true;
                      }
                    }
                  }
                });

                if (jingao) {
                  this.$message.error("请填写完整地址");
                  return false;
                }
                let data = JSON.parse(JSON.stringify(this.formData));
                data.startAddress = JSON.parse(JSON.stringify(this.start));
                data.endAddress = JSON.parse(JSON.stringify(this.end));
                if (this.orderId) {
                  this.$http.supplierManagementApi.updateOrderSelf(data).then(res1 => {
                    if (res1.data.code == 200) {
                      this.$message.success("修改成功");
                      this.issubmit = true;
                      this.$router.push("/supplierManagement/assistcreatingOrder");
                    }

                  })

                } else {
                  this.$http.supplierManagementApi.addOrderGoods(data).then(res2 => {
                    if (res2.data.code == 200) {
                      this.$message.success("提交成功");
                      this.issubmit = true;
                      this.$store.commit("saveCreateOrder", null);
                      this.$router.push("/supplierManagement/assistcreatingOrder");
                    }

                  })

                }
              })

            } else {
              this.$message.error('请填写完整必填项')
              return false;
            }
          });
        } else {
          this.$message.error('请填写完整必填项')
          return false;
        }
      });

    },
  },
  mounted() { },
  beforeDestroy() {
    if (this.orderId || this.issubmit) {
      return;
    }
    let orderData = {
      formData: this.formData,
      transactionForm: this.transactionForm,
      SchedulingForm: this.SchedulingForm,
      ShippingReceivingInfoForm: this.ShippingReceivingInfoForm,
      start: this.start,
      end: this.end,
    };
    this.$store.commit("saveCreateOrder", orderData);
  },
  components: {
    breadcrumb,
    titleBgVue,
  },
};
</script>

<style lang="scss" scoped>
.inputError {
  ::v-deep .el-input__inner {
    border-color: #F56C6C;
  }

}

.controlLine {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;


  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.pointer {
  &:hover {
    transition: 0.2s;
    cursor: pointer;
    opacity: 0.8;
  }
}

.reddian {
  ::v-deep .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}

.beforeRedDian:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.Box {
  background-color: #fff;

  .header {
    height: 50px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding-left: 24px;
  }

  .main {
    padding: 34px 24px 52px;
    height: calc(100vh - 212px);
    overflow-y: scroll;

    .main_item {
      .titleBox {
        display: flex;
        background-color: #f8f8f8;
        height: 40px;

        .shuxian {
          height: 14px;
          width: 3px;
          background-color: #1890ff;
          margin: 13px 6px 13px 12px;
        }

        .title {
          color: #262626;
          font-size: 13px;
          font-weight: bold;
          line-height: 40px;
        }
      }

      padding-top: 28px;



      ::v-deep .el-form-item__label {
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        // height:32px;
        // line-height: 40px;

      }

      .formItem {


        .input_form {
          ::v-deep .el-select {
            width: 100%;
          }
        }

        //选择车型
        .carTypeSelect {
          ::v-deep .el-select {
            width: 240px;
          }

          // 车辆照片
          .carPicBox {
            position: absolute;
            top: calc(100% + 8px);
            width: 240px;
            height: 161px;
            margin: 0 auto;

            .imgBg {
              background-color: #f5f5f5;
              width: 240px;
              height: 105px;

              .carPic {
                width: 240px;
                height: 105px;
                display: block;
              }
            }

            .infoBox {
              padding-top: 13px;
              border: 1px solid #f0f0f0;
              height: 56px;
              display: flex;
              justify-content: space-around;

              .info_item {
                display: flex;
                flex-direction: column;

                .info_item_tit {
                  color: #949494;
                  font-size: 12px;
                  line-height: 16px;
                }

                .text {
                  color: #262626;
                  font-size: 12px;
                  line-height: 16px;
                }
              }
            }
          }
        }

        // 订单备注
        .notesInput {
          width: 240px;
        }

        .addDriverBox {
          background-color: #f8f8f8;
          width: 100%;
          padding: 0 17px 19px;

          .addDriverBox_head {
            width: 100%;
            height: 57px;
            display: flex;
            align-items: center;

            .addDriverBtn {
              background-color: #1890ff;
              border-radius: 4px;
              height: 32px;
              width: 105px;
              color: #ffffff;
              font-size: 12px;
              padding: 8px 17px 9px 17px;
              transition: 0.2s;
              cursor: pointer;
              margin-right: 17px;

              .iconBtn {
                margin-right: 7px;
                font-size: 15px;
              }

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }
}

.footerControlBox {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 300;
  bottom: -16px;
  left: -16px;
  justify-content: center;
  height: 60px;
  width: calc(100% + 32px);
  background-color: #fff;
  margin-top: 28px;

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 16px;

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  &:hover {
    opacity: 0.8;
    transition: 0.2;
  }
}

// 添加司机对话框
.addDriver_dialog {
  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn2 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2;
      }
    }

    .submitBtn2 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 31px 40px 24px 40px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .titleBox {
    display: flex;
    margin-bottom: 17px;

    .title {
      color: #262626;
      font-size: 12px;
    }
  }

  .dialog_list {
    border: 1px solid #f0f0f0;
    border-bottom: none;

    .driverPicBox {
      height: 48px;
      width: 65px;
      background-color: #f1f0f0;

      .driverImg {
        height: 48px;
        width: 65px;
      }
    }

    .driverNameBox {
      display: flex;

      .driverName {
        color: #595959;
        font-size: 12px;
        margin-right: 5px;
      }

      .icon-info {
        font-size: 13px;
        color: #595959;
      }
    }

    // 表头样式
    ::v-deep .el-table__header th {
      padding: 8px 0;
    }

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #262626;
        font-size: 12px;
      }
    }

    // 表身体
    ::v-deep .el-table__row {
      height: 76px;
    }

    ::v-deep .el-table-column--selection .cell {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}

// 货物明细弹框
.cargoDetails_dialog {
  .head {
    .importBtn {
      margin-bottom: 9px;
      width: 120px;
      height: 36px;
      background-color: #1890ff;
      color: #fff;
      font-size: 12px;

      &:hover {
        opacity: 0.8s;
        transition: 0.2s;
      }
    }
  }

  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn3 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }
    }

    .submitBtn3 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 22px 32px 24px 32px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .cargoDetails_table {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }
}

.flex-fpkp {
  display: flex;
  margin-bottom: 15px;
}

.cxbt {
  margin-left: 20px;
}
</style>

<style lang="scss">
// 司机信息和车辆信息
.BulletBox {
  padding: 18px 12px;

  >.info_item {
    >.titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >.title {
        color: #262626;
        font-size: 14px;
        margin-right: 14px;
      }

      >.line {
        height: 1px;
        flex: 1;
        background-color: #f0f0f0;
      }
    }
  }
}

.null-png {
  height: 300px;
  width: 100%;
  font-weight: 600;
  display: flex;
  justify-content: center;
}

.null-png div {
  text-align: center;
}

.fpkp-dialog {
  padding-bottom: 30px;
}

.importBtn1 {
  width: 120px;
  font-size: 12px;
}
</style>

<style lang = "scss">
.tableRowStyleName {
  color: #262626 !important;
  font-size: 12px;
}
</style>
